<template>
  <mt-navbar v-model="headNav">
    <mt-tab-item id="head-nav1">新歌</mt-tab-item>
    <mt-tab-item id="head-nav2">排行</mt-tab-item>
    <mt-tab-item id="head-nav3">歌单</mt-tab-item>
    <mt-tab-item id="head-nav4">歌手</mt-tab-item>
  </mt-navbar>
</template>

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
export default {
  name:'head-nav',
  computed: {
    ...mapGetters(['headNav1']),
    headNav:{
      get(){
         return this.headNav1
        	// return this.$store.getters.headNav
      },
      set(nav){
        const index=nav.substr(-1);
        this.setHeadNav(nav);
        	// this.$store.commit('setHeadNav', nav)
        this.goRouter(Number(index))
      }
    }
  },
  methods: {
    ...mapActions(['setHeadNav']),
    goRouter(index){
      switch(index){
        case 1:
        this.$router.push({path:'/'})
        break;
        case 2:
        this.$router.push({path:'/rank'})
        break;
        case 3:
        this.$router.push({path:'/plist'})
        break;
        case 4:
        this.$router.push({path:'/singer'})
        break;
      }
    }
  }
};
</script>

<style>
.mint-navbar {
  width: 100%;
  height: 45px;
  position: fixed;
  top: 65px;
  left: 0;
  z-index: 1000;
  box-shadow: 0 3px 3px 0 #f4f4f4;
  /* padding: 12px 0 !important; */
}

.mint-tab-item-label {
  font-size: 16px !important;
}
</style>
